.content {
  padding: 30rpx;
  padding-top: 61rpx;
  // margin-top: 91rpx;

  /* item start */
  .item {
    position: relative;
    width: 48%;
    height: 117rpx;
    margin-top: 30rpx;
    transform-origin: center center;
    transform: scale(0);
    animation: enterAnimation 0.25s ease-out 0.2s forwards;

    &__bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      mask: url("");
      mask-size: 100% 100%, contain;
      mask-repeat: no-repeat;
      mask-composite: xor;
      z-index: 1;
    }

    .content {
      position: relative;
      display: flex;
      flex-direction: column;
      padding: 20rpx 0rpx 13rpx 28rpx;
      color: #4b5c87;
      z-index: 2;
      .title {
        font-size: 38rpx;
        font-weight: 400;
        line-height: 1;
      }
      .path {
        width: 80%;
        font-size: 28rpx;
        height: 30rpx;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        line-height: 1;
        margin-top: 10rpx;
        opacity: 0.5;
        .path-icon {
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .path-value {
          height: 100%;
          margin-left: 8rpx;
          word-wrap: nowrap;
        }
      }
    }

    .icon {
      position: absolute;
      z-index: 2;
      width: 58rpx;
      height: 58rpx;
      // background-color: aqua;
      bottom: 1rpx;
      right: 1rpx;
      border-radius: 50%;
      // bottom: 6rpx;
      // right: 9rpx;
      font-size: 40rpx;
      color: #4b5c87;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
    }
  }
  /* item end */
}

@keyframes enterAnimation {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
